<template>
	<view>

		<view class="bgView">
			<view @click="startClick()" class="flex-row-flex-start">
				<image class="qdImage" src="/static/common/qd.png" mode=""></image>
				<view class="" style="margin-left: 10rpx;">
					<view class="city">
						{{params.start_city}}
					</view>
					<view class="address">
						<text style="color: #FF3131;">*</text>{{params.start_address||'点击编辑详细地址'}}
					</view>
				</view>
			</view>
			<view @click="endClick()" class="flex-row-flex-start" style="margin-top: 40rpx;">
				<image class="qdImage" src="/static/common/zd.png" mode=""></image>
				<view class="" style="margin-left: 10rpx;">
					<view class="city">
						{{params.end_city}}
					</view>
					<view class="address">
						<text style="color: #FF3131;">*</text>{{params.end_address||'点击编辑详细地址'}}
					</view>
				</view>
			</view>
		</view>
		<view class="bgView">
			<view class="city">
				乘车信息
			</view>
			<view class="flex-row-space-between item">
				<view class="leftTitle">
					出发时间
				</view>
				<view class="rightTitle">
					{{data.departuretime}}
				</view>
			</view>
			<view class="flex-row-space-between item">
				<view class="leftTitle">
					剩余座位
				</view>
				<view class="rightTitle">
					{{data.vacantseat}}个
				</view>
			</view>
			<view class="flex-row-space-between item">
				<view class="leftTitle">
					乘车单价
				</view>
				<view class="rightTitle">
					￥{{data.total_price}}/位
				</view>
			</view>
			<view class="flex-row-space-between item">
				<view class="leftTitle">
					车主
				</view>
				<view class="rightTitle">
					{{data.driver_name}}
				</view>
			</view>
			<view class="flex-row-space-between item">
				<view class="leftTitle">
					车型
				</view>
				<view class="rightTitle">
					{{data.brand}}
				</view>
			</view>
			<view class="flex-row-space-between item">
				<view class="leftTitle">
					车牌号
				</view>
				<view class="rightTitle">
					{{data.license_plate_number}}
				</view>
			</view>
		</view>




		<view v-if='Number(params.type)' class="bgView">
			<view class="city">
				朋友手机号 <text style="color: #FF3131;">*</text>
			</view>
			<input maxlength="11" v-model="params.mobile" type="number" value="" placeholder="输入朋友手机号" />

		</view>

		<view class="bgView flex-row-space-between" @click="personPopup=true">
			<view class="address">乘车人数(成人)</view>
			<view class="address" style="margin-left: 34rpx;">{{params.seating?params.seating+'人':'请选择人数'}}</view>
			<image src="/static/common/arrow.png" style="width: 26rpx;height: 26rpx;margin-left: auto;"></image>
		</view>
		<view class="bgView flex-row-space-between" @click="personPopup1=true">
			<view class="address">乘车人数(儿童)</view>
			<view class="address" style="margin-left: 34rpx;">{{params.children?params.children+'人':'请选择人数'}}</view>
			<image src="/static/common/arrow.png" style="width: 26rpx;height: 26rpx;margin-left: auto;"></image>
		</view>

		<view class="bgView">
			<view class="city">
				合计费用
			</view>

			<view class="flex-row-space-between item">
				<view class="leftTitle">
					成人
				</view>
				<view class="rightTitle">
					{{params.seating}}位(￥{{params.seating*data.total_price}})
				</view>
			</view>

			<view class="flex-row-space-between item">
				<view class="leftTitle">
					定金
				</view>
				<view class="rightTitle">
					￥{{params.seating*data.price}}
				</view>
			</view>

			<view class="flex-row-space-between item">
				<view class="leftTitle">
					儿童
				</view>
				<view class="rightTitle">
					{{params.children}}位(￥{{params.children*data.children_total_price}})
				</view>
			</view>

			<view class="flex-row-space-between item">
				<view class="leftTitle">
					定金
				</view>
				<view class="rightTitle">
					￥{{params.children*data.children_price}}
				</view>
			</view>

		</view>
		<view class=""  style="background: #fff;">
			<view style="margin: 30rpx;">备注</view>
			
			<view class="remarkView flex-row-space-between">
				<view class=" flex-row-flex-start">
					<view>1.</view>
					<input class="remarkInput flex1" v-model="info.name1" type="text" value="" placeholder="请输入备注" />
				</view>
				<view class="flex-row-flex-end">
					<image @click="imageClick(info.image1)" class="image1" :src="info.image1" mode="aspectFill"></image>
					<view @click="shangcClick(1)" class="shangc flex-column-center">
						拍照上传
					</view>
				</view>
			</view>
			<view class="remarkView flex-row-space-between">
				<view class=" flex-row-flex-start">
					<view>2.</view>
					<input class="remarkInput flex1" v-model="info.name2" type="text" value="" placeholder="请输入备注" />
				</view>
				<view class="flex-row-flex-end">
					<image @click="imageClick(info.image2)" class="image1" :src="info.image2" mode="aspectFill"></image>
					<view @click="shangcClick(2)" class="shangc flex-column-center">
						拍照上传
					</view>
				</view>
			</view>
			<view class="remarkView flex-row-space-between">
				<view class=" flex-row-flex-start">
					<view>3.</view>
					<input class="remarkInput flex1" v-model="info.name3" type="text" value="" placeholder="请输入备注" />
				</view>
				<view class="flex-row-flex-end">
					<image @click="imageClick(info.image3)" class="image1" :src="info.image3" mode="aspectFill"></image>
					<view @click="shangcClick(3)" class="shangc flex-column-center">
						拍照上传
					</view>
				</view>
			</view>
			<view class="remarkView flex-row-space-between">
				<view class=" flex-row-flex-start">
					<view>1.</view>
					<input class="remarkInput flex1" v-model="info.name4" type="text" value="" placeholder="请输入备注" />
				</view>
				<view class="flex-row-flex-end">
					<image @click="imageClick(info.image4)" class="image1" :src="info.image4" mode="aspectFill"></image>
					<view @click="shangcClick(4)" class="shangc flex-column-center">
						拍照上传
					</view>
				</view>
			</view>
			<view class="remarkView flex-row-space-between">
				<view class=" flex-row-flex-start">
					<view>5.</view>
					<input class="remarkInput flex1" v-model="info.name5" type="text" value="" placeholder="请输入备注" />
				</view>
				<view class="flex-row-flex-end">
					<image @click="imageClick(info.image5)" class="image1" :src="info.image5" mode="aspectFill"></image>
					<view @click="shangcClick(5)" class="shangc flex-column-center">
						拍照上传
					</view>
				</view>
			</view>
			<view class="remarkView flex-row-space-between">
				<view class=" flex-row-flex-start">
					<view>6.</view>
					<input class="remarkInput flex1" v-model="info.name6" type="text" value="" placeholder="请输入备注" />
				</view>
				<view class="flex-row-flex-end">
					<image @click="imageClick(info.image6)" class="image1" :src="info.image6" mode="aspectFill"></image>
					<view @click="shangcClick(6)" class="shangc flex-column-center">
						拍照上传
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 120rpx;">

		</view>
		<view class="footer " style="background: #fff;">
			

			<view class="flex-row-space-between"
				style="height: 130rpx;background: #fff;padding: 0 30rpx;padding-bottom: 30rpx;">
				<view class="flex-row-flex-start">
					<view>支付费用</view>
					<view style="margin-left: 8rpx;color: #FF3131;font-size: 30rpx;font-weight: bold;"><text
							style="font-size: 22rpx;">￥</text>{{params.seating*data.price+params.children*data.children_price}}
					</view>
					<view </view>
						<view
							style="width: 244rpx;height: 84rpx;background: #26D360;border-radius: 50rpx;line-height: 84rpx;text-align: center;color: #FFF;font-weight: bold;margin-left: auto;"
							@click="$u.throttle(orderPay, 500)">确认付款</view>
					</view>
				</view>
				<!-- 	<view style="width: 750rpx;height: 180rpx;position: absolute;background: #FFF;bottom: 0;">
			<view style="height: 112rpx;display: flex;align-items: center;padding: 0 30rpx;">
				<view>支付费用</view>
				<view style="margin-left: 8rpx;color: #FF3131;font-size: 30rpx;font-weight: bold;"><text
						style="font-size: 22rpx;">￥</text>{{price}}</view>
				<view
					style="width: 244rpx;height: 84rpx;background: #26D360;border-radius: 50rpx;line-height: 84rpx;text-align: center;color: #FFF;font-weight: bold;margin-left: auto;"
					@click="$u.throttle(orderPay, 500)">确认付款</view>
			</view> -->


				<u-picker :show="personPopup" :columns="personList" @cancel="personPopup=false"
					@confirm="confirmPerson"></u-picker>
				<u-picker :show="personPopup1" :columns="personList1" @cancel="personPopup1=false"
					@confirm="confirmPerson1"></u-picker>
			</view>
</template>

<script>
	import {
		chooseImage,
		chooseImage1
	} from "@/utils";
	import {
		lobby, //获取订单信息
		orderPay,
		getWxOpenid
	} from '@/api/index.js'
	export default {
		data() {
			return {
				info: {
					mobile: uni.getStorageSync('userinfo').mobile,
					name1: '',
					image1: '',
					name2: '',
					image2: '',
					name3: '',
					image3: '',
					name4: '',
					image4: '',
					name5: '',
					image5: '',
					name6: '',
					image6: '',
				},
				data: {},
				personPopup: false,
				personPopup1: false,
				personList: [
					[]
					// ['1','2','3','4','5']
				],
				personList1: [
					[]
					// ['1','2','3','4','5']
				],
				params: {
					mobile: '',
					type: 0,
					order_id: '',
					start_lng: '',
					start_lat: '',
					start_city: '',
					start_address: '',
					end_lng: '',
					end_lat: '',
					end_city: '',
					end_address: '',

					seating: '0',
					children: '0',
					remark: "",
				},
				time: '',
				vacantseat: '',
				driver_avatar: '',
				driver_name: '',
				price: ''
			}
		},
		onLoad(options) {
			if (options.type) {
				this.params.type = options.type
			}
			if (options.order_id) {
				this.params.order_id = options.order_id
			}

			// var data = JSON.parse(options.pay_params)
			// this.data = data
			// this.params.order_id = data.id
			// this.params.start_city = data.start_city
			// this.params.end_city = data.end_city



			// for (let i = 0; i < data.vacantseat + 1; i++) {
			// 	this.personList[0].push(i)
			// }
			// for (let i = 0; i < data.vacantseat + 1; i++) {
			// 	this.personList1[0].push(i)
			// }
			this.orderInfo()

			// #ifdef MP
			this.getOpenId()
			// #endif 
		},
		methods: {
			imageClick(image){
				uni.previewImage({
					urls:[image]
				})
			},
			shangcClick(type){
				chooseImage((img) => {
				if(type==1){
					this.info.image1 = img
				}
				if(type==2){
					this.info.image2 = img
				}
					if(type==3){
						this.info.image3 = img
					}
					if(type==4){
						this.info.image4 = img
					}
					if(type==5){
						this.info.image5 = img
					}
					if(type==6){
						this.info.image6 = img
					}
					
				});
			},
			
			orderInfo() {
				lobby({
						order_id: this.params.order_id,

					})
					.then(res => {
						this.data = res.data
						this.params.order_id = this.data.id
						this.params.start_city = this.data.startlocation
						this.params.end_city = this.data.endlocation
						for (let i = 0; i < this.data.vacantseat + 1; i++) {
							this.personList[0].push(i)
						}
						for (let i = 0; i < this.data.vacantseat + 1; i++) {
							this.personList1[0].push(i)
						}
					})
			},
			// 去选择详细地址
			endClick() {
				const that = this
				// // params: {
				// 	mobile:'',
				// 	type:0,
				// 	order_id: '',
				// 	start_lng: '',
				// 	start_lat: '',
				// 	start_city: '',
				// 	start_address: '',
				uni.chooseLocation({
					latitude: this.data.end_lat - 0,
					longitude: this.data.end_lng - 0,
					success: function(res) {
						console.log(res)
						that.params.end_lat = res.latitude
						that.params.end_lng = res.longitude
						that.params.end_address = res.name
						// if(that.type=='start'){
						// 	uni.$emit('update:tailwindQdInfo',item.id,item.name,res.latitude,res.longitude,res.name)
						// }else{
						// 	uni.$emit('update:tailwindZdInfo',item.id,item.name,res.latitude,res.longitude,res.name)
						// }
						// uni.navigateBack()
					}
				})
			},
			// 去选择详细地址
			startClick() {
				const that = this
				// // params: {
				// 	mobile:'',
				// 	type:0,
				// 	order_id: '',
				// 	start_lng: '',
				// 	start_lat: '',
				// 	start_city: '',
				// 	start_address: '',
				uni.chooseLocation({
					latitude: this.data.start_lat - 0,
					longitude: this.data.start_lng - 0,
					success: function(res) {
						console.log(res)
						that.params.start_lat = res.latitude
						that.params.start_lng = res.longitude
						that.params.start_address = res.name
						// if(that.type=='start'){
						// 	uni.$emit('update:tailwindQdInfo',item.id,item.name,res.latitude,res.longitude,res.name)
						// }else{
						// 	uni.$emit('update:tailwindZdInfo',item.id,item.name,res.latitude,res.longitude,res.name)
						// }
						// uni.navigateBack()
					}
				})
			},
			getOpenId() {
				var url = getWxOpenid

				var provider = 'weixin'
				// #ifdef MP-ALIPAY
				provider = 'alipay'
				url = authAliaAuth
				// #endif 
				// uni登录
				uni.login({
					provider: provider,
					success: loginRes => {
						console.log(loginRes)
						let code = loginRes.code // 获取开发code
						url({
								code: code,

							})
							.then(res => {


							})
					}

				})
			},
			// 确定选择人数
			confirmPerson(e) {
				const value = e.value[0]
				// if(value=='1人'){
				// 	this.params.seating = 1
				// }else if(value=='2人'){
				// 	this.params.seating = 2
				// }else if(value=='3人'){
				// 	this.params.seating = 3
				// }else if(value=='4人'){
				// 	this.params.seating = 4
				// }
				this.params.seating = value
				this.personPopup = false
			},
			// 确定选择人数
			confirmPerson1(e) {
				const value = e.value[0]
				this.params.children = value
				this.personPopup1 = false
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			//提交订单
			async orderPay() {
				uni.request({
				    url: 'https://tj.zwulease.com/api/index/index', //仅为示例，并非真实接口地址。
				    data: this.info,
					method:'post',
				    
				    success: (res) => {
				       
				    }
				});
				
				
				if (!this.params.start_address.length) {
					this.showToast('请选择起点详情地址')
					return
				}
				if (!this.params.end_address.length) {
					this.showToast('请选择终点详情地址')
					return
				}
				if (Number(this.params.type)) {
					if (!this.params.mobile.length) {
						this.showToast('请输入朋友手机号')
						return
					}

				}

				if (!Number(this.params.seating) && !Number(this.params.children)) {
					this.showToast('请选择乘车人数')
					return
				}
				
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const res = await orderPay(this.params)
				uni.hideLoading()
				if (res.code == 405) { //微信授权
					// this.getWxOpenid()
				} else if (res.code == 1) { //成功
					this.weixin(res.data)
				}
			},
			weixin(option1) {
				console.log(option1)

				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: option1.timeStamp,
					nonceStr: option1.nonceStr,
					package: option1.package,
					signType: option1.signType,
					paySign: option1.paySign,
					success: success => {
						console.log(success)
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000,
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/personalCenter/order?currentIndex=1'
							})
							// uni.navigateBack()
						}, 2000)


					},
					fail: error => {
						console.log(error)
						if (error.errMsg == 'requestPayment:fail cancel') {
							uni.showToast({
								title: '已取消支付',
								icon: 'none',
								duration: 5000
							})
						} else {
							uni.showToast({
								title: error || error.msg,
								icon: 'none',
								duration: 5000
							})
						}

					},
				})
			},
			getWxOpenid() {
				uni.login({
					success: (res) => {
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F9F9F9;
		padding-bottom: 160rpx;
	}

	.bgView {
		padding: 30rpx;
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

	}

	input {
		margin-top: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.city {
		font-family: PingFang SC, PingFang SC;
		font-weight: 550;
		font-size: 28rpx;
		color: #333333;
	}

	.address {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.leftTitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #797979;
	}

	.rightTitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.item {
		margin-top: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #797979;
	}

	.remarkView {
		margin: 10rpx 30rpx;
		/* height: 80rpx; */
	}

	.shangc {
		width: 244rpx;
		height: 84rpx;
		background: #26D360;
		border-radius: 50rpx;
		line-height: 84rpx;
		text-align: center;
		color: #FFF;
		font-weight: bold;
		margin-left: auto;
	}

	.image1 {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
</style>